<template>
  <div>
    <el-card class="pane-card">
      <el-tabs v-model="type">
        <el-tab-pane name="1" label="沟通记录" class="communicate-pane">
          <div class="manage-box">
            <div>客户经理：{{ info['manager_name'] }}</div>
            <div>运维支持：{{ info['maintain_name'] }}</div>
            <div>项目负责：{{ info['duty_name'] }}</div>
            <el-button size="small" @click="showDialog('managerForm')">编辑</el-button>
          </div>
          <div class="level-box">
            <p><b>客户星级： </b></p>
            <el-rate
              v-model="info['star_class']"
              :texts="['一星客户','二星客户','三星客户','四星客户','五星客户']"
              show-text @change="saveCustomerLevel"/>
          </div>
          <div class="assignment-log">
            <h4>● 指派记录</h4>
            <el-card>
              <el-row>
                <el-col v-for="(item, index) in info['assign_log']" :key="index" :xs="12" :sm="8" :md="7" :lg="6" :xl="4">
                  <h1>{{ item['assign_admin'] }}</h1>
                  <span>{{ item.created_at }}</span>
                </el-col>
              </el-row>
            </el-card>
          </div>
          <el-row class="customer-info">
            <h4>● 客户信息</h4>
            <el-col :span="12">
              <div>名称：{{ info.name }}</div>
              <div>电话：{{ info.mobile }}</div>
              <div>其他电话：{{ info.spare_mobile }}</div>
              <div>备注：{{ info.remarks }}</div>
            </el-col>
            <el-col :span="12">
              <div>微信：{{ info.wechat }}</div>
              <div>QQ：{{ info.qq }}</div>
              <div>邮箱：{{ info.email }}</div>
              <div>座机：{{ info.telephone }}</div>
            </el-col>
          </el-row>
          <el-divider/>
          <div class="add-log">
            <h4>● 添加新记录</h4>
            <div class="radio">
              <div>是否需要继续联系：</div>
              <el-radio-group v-model="logForm.is_contact">
                <el-radio :label="1">需要</el-radio>
                <el-radio :label="0">不需要</el-radio>
              </el-radio-group>
            </div>
            <div>
              <div>下次联系：</div>
              <el-date-picker v-model="logForm.comm_time" :picker-options="datePickerOptions" type="datetime" placeholder="选择日期时间" align="right"/>
              <div class="remark">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*注:请选择10年以内日期</div>
            </div>
            <div>
              <div>附加图片：</div>
              <ws-upload-multiple-img v-model="logForm['pic']" :path="logForm['pic_url']" :limit="3" width="90" height="90"/>
            </div>
            <div>
              <div>沟通内容：</div>
              <el-input v-model="logForm.contentlog" type="textarea" rows="4"/>
            </div>
            <div>
              <el-button type="success" class="bg-green" @click="submit">确 定</el-button>
            </div>
          </div>
          <div class="communicate-log">
            <h4>● 沟通记录</h4>
            <div class="next-time">下次联系时间：{{ info['contact_next_time'] }}</div>
            <el-card v-if="!info['contact_log']||info['contact_log'].length===0">
              <div>空空如也~</div>
            </el-card>
            <div v-for="(item, index) in info['contact_log']" :key="index" class="timeline">
              <el-row class="content">
                <el-card>
                  <div slot="header" class="header">
                    <span>{{ item['admin_name'] }}</span>
                    <div class="text-right" style="color: #b7b7b7;">{{ item['created_at'] }}</div>
                  </div>
                  <div class="body">
                    <div v-if="item['pic']">
                      <el-image v-for="(pitem,pindex) in item.pic" :key="pindex" :src="pitem" :preview-src-list="item.pic" style="width: 90px;height: 90px;"/>
                    </div>
                    <div v-html="item['contentlog']">{{ item['contentlog'] }}</div>
                  </div>
                </el-card>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2" label="运维支持" class="support-pane">
          <div class="remind">
            <div class="title">
              <label>到期提醒：</label>
              <el-date-picker
                v-model="supportData.remind_time"
                type="date"
                placeholder="选择日期时间"
                size="small"
                value-format="yyyy-MM-dd"
                @change="saveRemindTime"/>
              <el-tag type="success">{{ supportData.expire }}天</el-tag>
            </div>
            <div class="title">
              <label>客户备注：</label>
              <el-input v-model="supportData.details" type="textarea" style="width: 80%;" autosize/>
              <el-button type="success" class="bg-green" autosize size="small" @click="saveCustomerRemarks">保存</el-button>
            </div>
          </div>

          <el-collapse v-model="activeNames">
            <!--账号信息-->
            <el-collapse-item name="1">
              <template slot="title">
                <b>账号信息</b>
              </template>
              <div class="account">
                <el-button type="success" class="bg-green" size="small" @click="showDialog('accountForm')">添加账号</el-button>
                <el-table :data="supportData['account_number']" border highlight-current-row>
                  <el-table-column type="index" width="50"/>
                  <el-table-column prop="account" label="账号" min-width="140"/>
                  <el-table-column prop="password" label="密码" min-width="140"/>
                  <el-table-column prop="name" label="备注" min-width="400"/>
                  <el-table-column label="操作" width="160" header-align="center" align="center">
                    <template slot-scope="scope">
                      <el-button type="success" size="small" icon="el-icon-edit" circle class="bg-green"
                                 @click="showDialog('accountForm', scope)"/>
                      <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deleteSupperData('account', scope)"/>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <!--代码托管-->
            <el-collapse-item name="2">
              <template slot="title">
                <b>代码托管地址</b>
              </template>
              <div class="account">
                <el-button type="success" class="bg-green" size="small" @click="showDialog('codeForm')">添加记录</el-button>
                <el-table :data="supportData['trusteeship']" border highlight-current-row>
                  <!--<el-table-column prop="id" label="ID" width="80" header-align="center" align="center"/>-->
                  <el-table-column type="index" width="50"/>
                  <el-table-column prop="url" label="地址" width="260"/>
                  <el-table-column prop="describe" label="描述" min-width="420"/>
                  <el-table-column label="操作" width="160" header-align="center" align="center">
                    <template slot-scope="scope">
                      <el-button type="success" size="small" icon="el-icon-edit" circle class="bg-green" @click="showDialog('codeForm', scope)"/>
                      <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deleteSupperData('trusteeship', scope)"/>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <!--上传附件-->
            <el-collapse-item name="3">
              <template slot="title">
                <b>附件管理</b>
              </template>
              <div class="account">
                <el-button type="success" class="bg-green" size="small" @click="showDialog('fileForm')">上传附件</el-button>
                <el-table :data="supportData['annex']" border highlight-current-row>
                  <!--<el-table-column prop="id" label="ID" min-width="80" header-align="center" align="center"/>-->
                  <el-table-column type="index" width="50"/>
                  <el-table-column prop="url" label="地址" min-width="360"/>
                  <el-table-column prop="describe" label="备注" min-width="300"/>
                  <el-table-column prop="admin_name" label="更新时间" width="160"/>
                  <el-table-column label="操作" width="160" header-align="center" align="center">
                    <template slot-scope="scope">
                      <el-button type="primary" size="small" icon="el-icon-download" circle @click="toDownLoad(scope.row)"/>
                      <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deleteSupperData('annex', scope)"/>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane name="3" label="合同管理" class="contract-pane">
          <div class="title">
            <div class="label">合同管理</div>
            <el-button type="success" class="bg-green" size="small" @click="showDialog('contractForm')">上传合同</el-button>
          </div>
          <el-table :data="contractData" border highlight-current-row>
            <!--<el-table-column prop="id" label="ID" min-width="80" header-align="center" align="center"/>-->
            <el-table-column type="index" width="50"/>
            <el-table-column prop="url" label="地址" min-width="240"/>
            <el-table-column prop="name" label="描述" width="300"/>
            <el-table-column prop="updata_at" label="更新时间" width="160"/>
            <el-table-column label="操作" width="160" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" icon="el-icon-download" circle @click="toDownLoad(scope.row)"/>
                <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deleteSupperData('contract', scope)"/>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="4" label="订单详细" class="order-pane">
          <div class="header">
            <div>
              <el-input v-model="searchTerms.searchValue" placeholder="请输入内容（商品名称）" class="search-input" />
              <el-button type="success" class="do-btn" icon="el-icon-search">搜索</el-button>
            </div>
          </div>
          <el-table :data="customerOrder" border highlight-current-row>
            <el-table-column prop="id" label="ID" min-width="70" header-align="center" align="center"/>
            <el-table-column prop="member_name" label="客户名称" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="member_phone" label="手机" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="goods_name" label="商品名称" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="goods_money" label="商品金额" min-width="120" header-align="center" align="center"/>
            <el-table-column prop="buy_time" label="购买时间" min-width="160" header-align="center" align="center">
              <template slot-scope="scope">
                {{ parseTime(scope.row['buy_time'], '{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column prop="order_number" label="订单号" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="order_bonus" label="订单提成" min-width="100" header-align="center" align="center"/>
            <el-table-column prop="name" label="提交人" min-width="80" header-align="center" align="center"/>
            <el-table-column label="备注(拒绝备注)" min-width="240">
              <template slot-scope="scope">
                {{ scope.row.status===2?scope.row.refuse_remarks:scope.row.remarks }}
              </template>
            </el-table-column>
            <el-table-column prop="order_status" label="订单状态" min-width="100" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status===0" type="warning">审核中</el-tag>
                <el-tag v-else-if="scope.row.status===1" type="success">审核成功</el-tag>
                <el-tag v-else-if="scope.row.status===2" type="success">已拒绝</el-tag>
                <el-tag v-else type="info">已退款</el-tag>
              </template>
            </el-table-column>
            <el-table-column v-if="false" label="操作" min-width="200" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <el-tooltip content="退款" placement="top">
                  <el-button v-if="$store.getters.id===1&&scope.row.status===1" type="info" size="small"
                             icon="el-icon-refresh" circle @click="toRefund(scope.row)"/>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!--负责人信息修改弹窗-->
    <el-dialog :visible.sync="managerFormVisible" title="负责人修改" width="480px" class="dialog" center @close="resetDialog('managerForm')">
      <el-form ref="managerForm" :model="managerForm" label-width="150px">
        <el-form-item label="客户经理">
          <el-select v-model="managerForm['manager_id']" filterable>
            <el-option v-for="item in adminList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="运维支持">
          <el-select v-model="managerForm['maintain_id']" filterable>
            <el-option v-for="item in adminList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目负责">
          <el-select v-model="managerForm['duty_id']" filterable>
            <el-option v-for="item in adminList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="managerFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog('managerForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--账号信息弹窗-->
    <el-dialog :visible.sync="accountFormVisible" :title="accountForm['title']+'账号信息'" width="480px" class="dialog" center @close="resetDialog('accountForm')">
      <el-form ref="accountForm" :model="accountForm" label-width="150px">
        <el-form-item label="账号">
          <el-input v-model="accountForm['account']"/>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="accountForm['password']"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="accountForm['name']"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="accountFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog('accountForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--代码托管信息弹窗弹窗-->
    <el-dialog :visible.sync="codeFormVisible" :title="codeForm['title']+'代码托管信息'" width="480px" class="dialog" center @close="resetDialog('codeForm')">
      <el-form ref="codeForm" :model="codeForm" label-width="150px">
        <el-form-item label="地址">
          <el-input v-model="codeForm['url']"/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="codeForm['describe']"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="codeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog('codeForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--附件弹窗-->
    <el-dialog :visible.sync="fileFormVisible" title="上传附件" width="580px" class="dialog" center @close="resetDialog('fileForm')">
      <el-form ref="fileForm" :model="fileForm" label-width="120px">
        <!--<el-form-item label="名称">
          <el-input v-model="fileForm['describe']"/>
        </el-form-item>-->
        <el-form-item label="文件">
          <ws-upload-single-file v-model="fileForm['url']" :path="fileForm['url']" :api="fileUploadUrl" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="fileForm['describe']"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fileFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog('fileForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--合同弹窗-->
    <el-dialog :visible.sync="contractFormVisible" title="上传合同" width="580px" class="dialog" center @close="resetDialog('contractForm')">
      <el-form ref="contractForm" :model="contractForm" label-width="120px">
        <el-form-item label="名称">
          <el-input v-model="contractForm['name']"/>
        </el-form-item>
        <el-form-item label="文件">
          <ws-upload-single-file v-model="contractForm['url']" :path="contractForm['url']" :api="contractUploadUrl" />
        </el-form-item>
        <!--<el-form-item label="描述">
          <el-input v-model="contractForm['describe']"/>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fileFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog('contractForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { handleSortChange, handleSizeChange, handleCurrentChange, columnCheck, parseTime } from '@/utils/table'
export default {
  data() {
    return {
      member_id: '',
      type: 1,
      activeNames: ['1', '2', '3'],
      datePickerOptions: {
        shortcuts: [{
          text: '1天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '3天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 3)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }, {
          text: '两周',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 14)
            picker.$emit('pick', date)
          }
        }, {
          text: '一个月',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
            picker.$emit('pick', date)
          }
        }, {
          text: '三个月',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 90)
            picker.$emit('pick', date)
          }
        }]
      },
      searchTerms: {
        searchValue: ''
      },

      progressList: ['初步沟通', '需求分析', '展示引导', '方案报价', '协商议价', '成单签约', '丢单'],
      info: {
        star_class: 0,
        contact_time: '',
        next_contact_time: ''
      },

      // 运维页面信息
      supportData: {
        remind_time: '',
        expire: '',
        details: '',
        account_number: [],
        trusteeship: [],
        annex: []
      },

      // 添加沟通记录
      logForm: {
        member_id: '',
        is_contact: 1,
        contentlog: '',
        comm_time: '',
        pic: '',
        pic_url: ''
      },

      adminList: [],
      // 负责人弹窗
      managerFormVisible: false,
      managerForm: {
        member_id: '',
        manager_id: '',
        maintain_id: '',
        duty_id: ''
      },

      // 账号弹窗
      accountFormVisible: false,
      accountForm: {},

      // 代码托管信息弹窗
      codeFormVisible: false,
      codeForm: {},

      // 附件上传地址
      fileUploadUrl: this.$store.getters.serverUrl + '/admin/ajax/uploadAnnex',
      // 附件弹窗
      fileFormVisible: false,
      fileForm: {},

      // 合同上传地址
      contractUploadUrl: this.$store.getters.serverUrl + '/admin/ajax/uploadContract',
      // 合同列表
      contractData: [],
      // 合同弹窗
      contractFormVisible: false,
      contractForm: {},

      // 客户订单
      customerOrder: [],
      tableLoading: false,
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [10, 20, 50, 100, 1000],
      total: 0
    }
  },
  watch: {},
  created() {
    this.member_id = this.$route.query.id;
    this.type = this.$route.query.type + '';
    this.getCustomerLog();
    this.getAdminList();
    this.getSupportData();
    this.getContractList();
    this.getCustomerOrder();
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, columnCheck, parseTime,
    /**
     *  获取客户沟通信息
     *  接口:'customer/detail/{id}'
     */
    getCustomerLog() {
      const url = '/member/contactLog/' + this.member_id;
      this.$store.dispatch('GetConnect', { url }).then(res => {
        Object.assign(this.info, res.data);
        this['managerForm'] = {
          member_id: res.data.id,
          manager_id: res.data.manager_id,
          maintain_id: res.data.maintain_id,
          duty_id: res.data.duty_id
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     *  获取系统用户列表
     *  接口:'user/all-list'
     */
    getAdminList() {
      const url = 'user/all-list'// 不包含离职人员
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.adminList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     * 修改选择客户的负责人
     */
    showDialog(formName, scope) {
      // console.log(this[formName], scope);
      if (scope) {
        Object.assign(this[formName], scope.row)
        this[formName]['id'] = scope.$index;
        this[formName]['member_id'] = this.member_id;
        this[formName]['title'] = '修改';
      } else {
        if (formName !== 'managerForm') {
          this[formName] = {
            member_id: this.member_id,
            title: '添加'
          }
        }
      }
      this[formName + 'Visible'] = true;
      // console.log(this[formName]);
    },

    // 修改客户星级
    saveCustomerLevel(){
      const url = 'member/updateStarClass';
      const data = {
        member_id: this.member_id,
        star_class: this.info['star_class']
      };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success('修改成功~');
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 添加
    submitDialog(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = Object.assign({}, this[formName]);
          let url = '';
          if (formName === 'managerForm') {
            url = 'member/memberAssignLog';
          } else if (formName === 'accountForm') {
            url = 'member/addAccountNumber';
            if (this[formName]['title'] === '修改') {
              url = 'member/updateAccount';
            }
          } else if (formName === 'codeForm') {
            url = 'member/addTrusteeship';
            if (this[formName]['title'] === '修改') {
              url = 'member/updateTrusteeship';
            }
          } else if (formName === 'fileForm') {
            url = 'member/addAnnex';
            if (this[formName]['title'] === '修改') {
              url = 'member/updateAnnex';
            }
          } else if (formName === 'contractForm') {
            url = 'member/addContract';
          }
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg);
            this[formName] = {};
            this[formName + 'Visible'] = false;
            this.getCustomerLog();
            this.getSupportData();
            this.getContractList();
          }).catch((err) => {
            this.$message.error(err.msg);
          })
        } else {
          this.$message.error('提交失败,请检查必填项');
        }
      })
    },

    resetDialog(formName) {
      this.$refs[formName].resetFields()
      if (formName === 'fileForm' || formName === 'contractForm') {
        // ws-upload清空
        this.$refs[formName].$children[0].$children[0].$children[0].clearFiles()
      }
    },

    /**
     * 添加沟通记录
     * customer/ajax/{id}
     */
    submit() {
      if ((!this.logForm.comm_time || this.logForm.comm_time === '' || this.logForm.comm_time === null) && this.logForm.is_contact === 1) {
        this.$message.error('检查时间是否选择');
      } else {
        const data = Object.assign({}, this.logForm)
        data.member_id = this.member_id
        const url = 'member/contact';
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success('沟通记录添加成功');
          this.getCustomerLog();
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }
    },

    // 获取运维支持信息
    getSupportData() {
      const url = 'member/addmaintainList';
      const data = {
        member_id: this.member_id
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.supportData = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 运维修改提醒时间
    saveRemindTime() {
      const url = 'member/updateRemind';
      const data = {
        member_id: this.member_id,
        remind_time: this.supportData.remind_time
      };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success('修改成功~');
        this.getCustomerLog();
        this.getSupportData();
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 运维支持保存备注
    saveCustomerRemarks(){
      const url = 'member/updateDetails';
      const data = {
        member_id: this.member_id,
        details: this.supportData.details
      };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success('修改成功~');
        this.getCustomerLog();
        this.getSupportData();
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 运维删除信息
    deleteSupperData(type, scope){
      this.$confirm('此操作将记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'member/delDataInfo'
        const data = { type: type, member_id: this.member_id, id: scope.$index }
        this.$store.dispatch('GetConnect', { url, data }).then(() => {
          this.getSupportData();
          this.getContractList();
          this.$message.success('操作成功')
        }).catch(e => {
          this.$message.error(e.msg)
        })
      })
    },

    // 获取合同列表
    getContractList(){
      const url = 'member/contractList';
      const data = {
        member_id: this.member_id
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.contractData = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 获取订单详情
    getCustomerOrder() {
      const url = 'member/ordersMember'
      const data = {
        member_id: this.member_id,
        search: this.searchValue,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.customerOrder = res.data.rows;
        this.total = res.data.total;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 下载
    toDownLoad(row){
      // console.log(row)
      const alink = document.createElement('a')
      alink.target = '_blank';
      alink.href = 'https://crmweb.netbcloud.com/admin/download/file?token=' + this.$store.getters.token + '&url=' + row.url;
      alink.download = row.name || row.describe;
      alink.click();
    },

    // 退款
    confirmOrder(row, action) {
      this.$confirm('此操作将退款该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'order/del'
        const data = { id: row.id, c: action, pay_type: 'refund' }
        this.$store.dispatch('GetConnect', { url, data }).then(() => {
          this.getData()
          this.$message.success('操作成功')
          this.dialogVisible = false
        }).catch(e => {
          this.$message.error(e.msg)
        })
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.pane-card{
  min-width: 1000px;
  max-width: 1400px;
  margin: 0 auto;
}

.communicate-pane{
  .manage-box{
    background-color: $panGreen;
    height: 60px;
    padding: 0 20px;
    margin-bottom: 10px;
    border-radius: 6px;
    @include flex-row(center, none);
    >div{
      flex: 1;
      color: #fff;
    }
  }
  .level-box{
    @include flex-row(center, none);
    padding: 0 20px;
    >p{
      margin-right: 20px;
    }
  }
  .assignment-log{
    padding: 0 20px 20px 0;
    .el-card{
      .el-row{
        .el-col{
          text-align: center;
          h1{
            font-size: 18px;
          }
          span{
            font-size: 14px;
            color: $textGray;
          }
        }
      }
    }
  }
  .customer-info {
    margin-bottom: 20px;
    .el-col {
      padding: 0 20px;
      >div{
        line-height: 40px;
      }
    }
  }
  .communicate-log{
    padding-right: 20px;
    .next-time{
      margin-bottom: 15px;color:#1EC2A0;
    }
    .timeline {
      position: relative;
      .content {
        padding-bottom: 20px;
        .header {
          @include flex-row(center, space-between);
        }
        .body {
          line-height: 26px;
          color: $textGray;
        }
      }
    }
  }
  .add-log{
    > div {
      @extend .flex-row;
      align-items: stretch;
      flex-wrap: wrap;
      padding: 10px 20px;
      .el-textarea{
        flex: 1;
      }
      .el-button{
        width: 200px;
        margin: 20px auto;
      }
      >div{
        line-height: 40px;
      }
    }
    .radio {
      padding: 0 20px;
      line-height: 50px;
      .el-radio-group {
        line-height: 50px;
      }
    }
  }
  .el-checkbox {
    margin-right: 30px;
  }
  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
  .remark {
    font-size: 13px;
    color: $textGray;
  }
}
  .support-pane{
    .remind{
      padding: 10px 0;
      border-bottom: 1px solid $gray;
      .title{
        @include flex-row(center, none);
        color: #000;
        margin-bottom: 20px;
      }
    }
    .account{
      padding-bottom: 30px;
    }
  }
  .contract-pane{
    .title{
      @include flex-row(center, none);
      padding: 10px 0;
      .label{
        font-weight: 600;
      }
      .el-button{
        margin-left: 20px;
      }
    }
  }
.order-pane {
  .header {
    @include flex-row(center, space-between);
    padding: 15px 0;
    div {
      @include flex-row(center, flex-start);
      flex-wrap: wrap;
      .do-btn {
        @extend .bg-green;
        margin-left: 6px;
      }
      .search-input {
        width: 240px;
      }
    }
  }
}
</style>
